<template>
  <svg
    id="svg"
    width="100%"
    height="100%"
    viewBox="0 0 1440 400"
    xmlns="http://www.w3.org/2000/svg"
    class="transition duration-300 ease-in-out delay-150"
  >
    <path
      d="M 0,400 C 0,400 0,200 0,200 C 71.55980861244021,216.3062200956938 143.11961722488041,232.61244019138758 251,222 C 358.8803827751196,211.38755980861242 503.08133971291863,173.8564593301435 622,171 C 740.9186602870814,168.1435406698565 834.555023923445,199.9617224880383 909,202 C 983.444976076555,204.0382775119617 1038.6985645933014,176.29665071770333 1124,171 C 1209.3014354066986,165.70334928229667 1324.6507177033493,182.85167464114835 1440,200 C 1440,200 1440,400 1440,400 Z"
      stroke="none"
      stroke-width="0"
      fill="#ffffffff"
      class="transition-all duration-300 ease-in-out delay-150 path-0"
    ></path>
  </svg>
</template>

<style lang="less" scoped>
svg {
  vertical-align: middle;
}

.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      'M 0,400 C 0,400 0,200 0,200 C 71.55980861244021,216.3062200956938 143.11961722488041,232.61244019138758 251,222 C 358.8803827751196,211.38755980861242 503.08133971291863,173.8564593301435 622,171 C 740.9186602870814,168.1435406698565 834.555023923445,199.9617224880383 909,202 C 983.444976076555,204.0382775119617 1038.6985645933014,176.29665071770333 1124,171 C 1209.3014354066986,165.70334928229667 1324.6507177033493,182.85167464114835 1440,200 C 1440,200 1440,400 1440,400 Z'
    );
  }
  25% {
    d: path(
      'M 0,400 C 0,400 0,200 0,200 C 69.55023923444975,236.7177033492823 139.1004784688995,273.4354066985646 243,248 C 346.8995215311005,222.56459330143542 485.1483253588516,134.97607655502395 589,143 C 692.8516746411484,151.02392344497605 762.3062200956937,254.66028708133967 846,271 C 929.6937799043063,287.3397129186603 1027.6267942583731,216.3827751196172 1129,190 C 1230.3732057416269,163.6172248803828 1335.1866028708134,181.80861244019138 1440,200 C 1440,200 1440,400 1440,400 Z'
    );
  }
  50% {
    d: path(
      'M 0,400 C 0,400 0,200 0,200 C 119.53110047846889,212.66985645933016 239.06220095693777,225.3397129186603 332,240 C 424.9377990430622,254.6602870813397 491.28229665071774,271.311004784689 567,255 C 642.7177033492823,238.688995215311 727.8086124401913,189.41626794258374 827,179 C 926.1913875598087,168.58373205741626 1039.4832535885168,197.02392344497608 1144,207 C 1248.5167464114832,216.97607655502392 1344.2583732057415,208.48803827751198 1440,200 C 1440,200 1440,400 1440,400 Z'
    );
  }
  75% {
    d: path(
      'M 0,400 C 0,400 0,200 0,200 C 127.48325358851676,187.55980861244018 254.96650717703352,175.1196172248804 334,168 C 413.0334928229665,160.8803827751196 443.61722488038276,159.08133971291866 525,175 C 606.3827751196172,190.91866028708134 738.5645933014353,224.55502392344496 856,232 C 973.4354066985647,239.44497607655504 1076.1244019138758,220.69856459330146 1171,211 C 1265.8755980861242,201.30143540669854 1352.9377990430621,200.65071770334927 1440,200 C 1440,200 1440,400 1440,400 Z'
    );
  }
  100% {
    d: path(
      'M 0,400 C 0,400 0,200 0,200 C 71.55980861244021,216.3062200956938 143.11961722488041,232.61244019138758 251,222 C 358.8803827751196,211.38755980861242 503.08133971291863,173.8564593301435 622,171 C 740.9186602870814,168.1435406698565 834.555023923445,199.9617224880383 909,202 C 983.444976076555,204.0382775119617 1038.6985645933014,176.29665071770333 1124,171 C 1209.3014354066986,165.70334928229667 1324.6507177033493,182.85167464114835 1440,200 C 1440,200 1440,400 1440,400 Z'
    );
  }
}
</style>
